<template>
  <div class="app-container">
    <!--查询条件表单-->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年级" prop="gradeId">
        <el-select v-model="queryParams.gradeId" @change="queryGradeChangeHandle" placeholder="年级" clearable>
          <el-option v-for="item in gradeOptions" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="clazzId">
        <el-select v-model="queryParams.clazzId" @change="queryClazzChangeHandle" placeholder="班级" clearable>
          <el-option v-for="item in clazzOptions" :key="item.clazzId" :label="item.clazzName" :value="item.clazzId" />
        </el-select>
      </el-form-item>
      <el-form-item label="学生" prop="studentId">
        <el-select v-model="queryParams.studentId" @change="queryStudentChangeHandle"  placeholder="请选择">
          <el-option
              v-for="item in studentOptions"
              :key="item.studentId"
              :label="item.studentName"
              :value="item.studentId"
              :disabled="item.status == 0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-collapse v-model="activeNames">
          <el-collapse-item :title="clazzData.gradeName + '/' + clazzData.clazzName" :name="clazzIndex" v-for="(clazzData,clazzIndex) in clazzDataList">
            <el-row>
              <el-col :span="24">
                <el-tabs type="border-card" :model-value="0">
                  <el-tab-pane :label="examData.examName" :name="examIndex" v-for="(examData, examIndex) in clazzData.examDataList">
                    <el-table :data="examData.courseDataList" border>
                      <el-table-column prop="courseName" label="课程" width="120" />
                      <el-table-column prop="examScore" label="考试成绩" width="120" v-if="showScoreColumn" />
                      <el-table-column label="考试等级" width="120" >
                        <template #default="scope">
                          <div v-html="scope.row.examScoreDegreeStr"></div>
                        </template>
                      </el-table-column>
                      <el-table-column label="薄弱点">
                        <template #default="scope">
                          <p v-for="item in scope.row.scoreKnowledgeDTOList" :key="item.knowledgeId">{{item.knowledgeName}}({{item.knowledgeScore}})</p>
                        </template>
                      </el-table-column>
<!--                      <el-table-column prop="finalScore" label="最终成绩" width="120" v-if="showScoreColumn" />-->
<!--                      <el-table-column label="最终等级" width="120" >-->
<!--                        <template #default="scope">-->
<!--                          <div v-html="scope.row.finalScoreDegreeStr"></div>-->
<!--                        </template>-->
<!--                      </el-table-column>-->
                      <el-table-column prop="remark" label="老师评语"   />
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col :span="24" v-if="showScoreColumn">
                <div ref="clazzPhysicalScoreBarStats" :id="'clazzPhysicalScoreBarStats_' + clazzData.clazzId" style="height: 420px" />
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="StudentScoreAnalysis">

import {nextTick, reactive, ref, toRefs, watch} from "vue";
import * as publicApi from "@/api/school/publicApi";
import * as studentScoreApi from "@/api/analysis/studentScoreApi";
import * as echarts from "echarts";

const data = reactive({
  queryParams: {
    gradeId: undefined,
    clazzId: undefined,
    studentId: undefined
  }
})

const { queryParams } = toRefs(data)

/** 查询表单相关变量 */
const showSearch = ref(true);
const loading = ref(true);
const gradeOptions = ref([]);
const clazzOptions = ref([]);
const studentOptions = ref([]);
const clazzDataList = ref([]);
const activeNames = ref([0]);
const showScoreColumn = ref(false);

/** 年级列表 */
publicApi.allGradeList().then((response) => {
  gradeOptions.value = response
})

function queryGradeChangeHandle(gradeId) {
  resetQuery()
  console.log(gradeId)
  data.queryParams.clazzId = undefined
}

function queryClazzChangeHandle(clazzId) {
  resetQuery()
  publicApi.allStudentList({clazzId}).then((response) => {
    studentOptions.value = response
  })
}

function queryStudentChangeHandle(studentId) {
  resetQuery()
  queryParams.value.studentId = studentId
  getList()
}

watch(
    () => data.queryParams.gradeId,
    (newValue, oldValue) => {
      console.log("newValue",newValue, "oldvalue", oldValue);
      if (newValue === undefined || newValue === null || newValue === "") {
        data.queryParams.clazzId = undefined
        clazzOptions.value = []
      } else {
        publicApi.allClazzList({gradeId : newValue}).then((response) => {
          clazzOptions.value = response
        })
      }
    }
);


function getList() {
  loading.value = true;
  studentScoreApi
      .listEchartsData(queryParams.value)
      .then((response) => {
        showScoreColumn.value = response.showScoreColumn
        clazzDataList.value = response.clazzDataList
        let array = [];
        for (let i = 0; i< response.clazzDataList.length; i++) {
          array.push(i);
        }
        activeNames.value = array;
        nextTick(() => {
          for (let i = 0; i< response.clazzDataList.length; i++) {
              let clazzData = response.clazzDataList[i];
              console.log(clazzData)
              barChartBuild(clazzData.echartsMap, clazzData.clazzId)
          }
        })
      })
      .finally(() => {
        loading.value = false;
      });
}

/** 搜索 */
function handleQuery() {
  getList()
}

/** 重置搜索条件 */
function resetQuery() {
  queryParams.value.studentId = undefined
  clazzDataList.value = []
}

//构造柱状图
function barChartBuild(echartsMap, clazzId) {
  let myEcharts = echarts.init(document.getElementById("clazzPhysicalScoreBarStats_" + clazzId), 'macarons');
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: echartsMap.objListList
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.split('').join('\n')
        }
      }
    },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: echartsMap.seriesBarList
  }
  myEcharts.setOption(option);
}


</script>

<style scoped>

</style>
